<template>
  <div class="container">
    <el-card class="map-card">
      <template #header>
        <div class="header">
          <h3>物流轨迹地图</h3>
          <div>
            <el-select v-model="selectedOrder" placeholder="选择订单" clearable>
              <el-option
                v-for="item in orderOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </template>
      <div id="map-container" class="map-container">
        <!-- 高德地图将在这里加载 -->
        <div class="placeholder-content">
          <el-empty description="请选择订单查看物流轨迹" />
        </div>
      </div>
    </el-card>

    <el-card class="track-info-card">
      <template #header>
        <div class="track-header">
          <h3>轨迹详情</h3>
        </div>
      </template>
      <el-empty v-if="!selectedOrder" description="请先选择订单" />
      <el-timeline v-else>
        <el-timeline-item
          v-for="(activity, index) in trackActivities"
          :key="index"
          :type="activity.type"
          :color="activity.color"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
          <div class="location">{{ activity.location }}</div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 订单选项
const orderOptions = ref([
  { value: '1', label: 'LG202405070001 - 上海到北京' },
  { value: '2', label: 'LG202405070002 - 广州到深圳' },
  { value: '3', label: 'LG202405070003 - 成都到重庆' }
])

// 当前选中的订单
const selectedOrder = ref('')

// 模拟轨迹活动数据
const trackActivities = ref([
  {
    content: '已揽件',
    timestamp: '2024-05-07 08:30',
    type: 'primary',
    color: '#409EFF',
    location: '上海市闵行区物流中心'
  },
  {
    content: '运输中',
    timestamp: '2024-05-07 10:15',
    type: 'primary',
    color: '#409EFF',
    location: '上海市虹桥机场'
  },
  {
    content: '中转',
    timestamp: '2024-05-07 12:30',
    type: 'primary',
    color: '#409EFF',
    location: '南京市物流转运中心'
  },
  {
    content: '运输中',
    timestamp: '2024-05-07 15:45',
    type: 'primary',
    color: '#409EFF',
    location: '济南市物流转运中心'
  },
  {
    content: '即将送达',
    timestamp: '2024-05-07 18:20',
    type: 'warning',
    color: '#E6A23C',
    location: '北京市海淀区配送站'
  }
])

// 在实际开发中需要集成高德地图API
// 示例：
// import AMapLoader from '@amap/amap-jsapi-loader'
// 
// onMounted(() => {
//   AMapLoader.load({
//     key: '你的高德地图API密钥',
//     version: '2.0',
//     plugins: ['AMap.Driving', 'AMap.Marker']
//   }).then((AMap) => {
//     // 初始化地图
//     const map = new AMap.Map('map-container', {
//       viewMode: '3D',
//       zoom: 11,
//       center: [116.397428, 39.90923]
//     })
//     
//     // 添加标记和路径等操作
//   }).catch(e => {
//     console.error('高德地图加载失败', e)
//   })
// })
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 20px;
  height: calc(100vh - 140px);
}

.map-card {
  height: 100%;
}

.track-info-card {
  height: 100%;
  overflow-y: auto;
}

.map-container {
  height: calc(100% - 50px);
  background-color: #f8f9fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header, .track-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.location {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
  
  .map-card, .track-info-card {
    height: auto;
  }
  
  .map-container {
    height: 400px;
  }
}
</style> 